<template>
  <el-card>
    <h1>默认插槽</h1>
    <div class="wrap1">
      <Com title="游戏">
        <ul>
          <li>张三</li>
          <li>李四</li>
          <li>王五</li>
        </ul>
      </Com>
      <Com title="美食">
        <ol>
          <li>11111111111</li>
          <li>22222222222</li>
          <li>33333333333</li>
        </ol>
      </Com>
      <Com title="电影">
        <ul>
          <li>西游记降魔篇1</li>
          <li>西游记降魔篇2</li>
          <li>西游记降魔篇3</li>
          <li>西游记降魔篇4</li>
        </ul>
      </Com>
    </div>
    <h1>具名插槽</h1>
    <div class="wrap2">
      <Com title="游戏">
        <ul>
          <li>张三</li>
          <li>李四</li>
          <li>王五</li>
          <img slot="img" src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto" >
        </ul>
      </Com>
      <Com title="美食">
        <ol>
          <li>11111111111</li>
          <li>22222222222</li>
          <li>33333333333</li>
          <div slot="a">
            <a href="">吃饭</a>
            <a href="">睡觉</a>
            <a href="">打豆豆</a>
          </div>
        </ol>
      </Com>
      <Com title="电影">
        <ul>
          <li>西游记降魔篇1</li>
          <li>西游记降魔篇2</li>
          <li>西游记降魔篇3</li>
          <li>西游记降魔篇4</li>
          <div slot="video">
            <video controls src="https://vd2.bdstatic.com/mda-kj1ffr79xv2s9ykn/sc/mda-kj1ffr79xv2s9ykn.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1638691138-0-0-03d64ba66ca007c414565c8fa2fd72a1&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=17376_1-3000201_3&klogid=1738784889"></video>
          </div>
        </ul>
      </Com>
    </div>
    <h1>作用域插槽</h1>
    <div class="wrap3">
      <ScopeSlot title="作用域插槽" >
        <template slot-scope="{games}" >
          <ul>
            <li v-for="(item,index) in games" :key="index">
              {{ item }}
            </li>
          </ul>
        </template>
      </ScopeSlot>
    </div>
  </el-card>
</template>

<script>
import Com from './components/com.vue'
import ScopeSlot from './components/scopeSlot.vue'
export default {
  components: {
    Com,
    ScopeSlot
  }
}
</script>

<style lang="less" scoped>
.wrap1,
.wrap2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img{
    width: 100%;
  }
}
</style>
